<template>
    <div>
        <nav-bar :head="head"></nav-bar>
        <div style="height:45px;"></div>
        <!--        <search></search>-->
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
            <van-list
                v-model="loading"
                :finished="finished"
                finished-text="我是有底线的"
                :error.sync="error"
                error-text="请求失败，点击重新加载"
                @load="onLoad"
            >
                <ProductGrid :list="list"></ProductGrid>
            </van-list>
        </van-pull-refresh>
    </div>
</template>

<script>
    import Vue from 'vue';
    import { List } from 'vant';
    import { PullRefresh } from 'vant';
    import ProductGrid from "../components/product_grid";
    import exampleImg from "../assets/img/example.jpg";

    Vue.use(PullRefresh);
    Vue.use(List);
    export default {
        name: "search_page",
        data(){
            return {
                list: [],
                page:1,
                count: 0,
                loading: false,
                isLoading: false,
                finished: false,
                error: false,
                refreshing: false,
                head:'我的收藏'
            }
        },
        components: { ProductGrid },
        methods: {
            onRefresh() {
                var this_ = this;
                this_.list = [];
                this_.page = 1;
                var data = {
                    'page': this.page,
                    'user_id': JSON.parse(localStorage.getItem('userInfo')).id
                };
                this_.$api.main.UserCollection(data).then(res => {
                    if (res.data.success){
                        for (let i = 0; i < res.data.data.data.length; i++) {
                            this_.list.push(res.data.data.data[i]);
                        }
                        this_.loading = false;
                        this_.isLoading = false;
                        this_.finished = true;
                    }else {
                        Toast.fail('网络错误，请稍后重试！')
                    }
                })
            },
            onLoad: function () {
                var this_ = this;
                if (this_.refreshing) {
                    this_.list = [];
                    this_.refreshing = false;
                }
                var data = {
                    'page': this.page,
                    'user_id': JSON.parse(localStorage.getItem('userInfo')).id
                };
                this_.loading = true;
                this_.$api.main.UserCollection(data).then(res => {
                    if (res.data.success){
                        for (let i = 0; i < res.data.data.data.length; i++) {
                            this_.list.push(res.data.data.data[i]);
                        }
                        this_.loading = false;
                        this_.page += 1;
                        if (res.data.data.data.length == 0) {
                            this_.finished = true;
                        }
                    }else {
                        Toast.fail('网络错误，请稍后重试！')
                    }
                })
            },
        }
    }
</script>

<style scoped>

</style>
